<script setup lang="ts">
import { MenuOptionsType, MenuTypeConst } from '@xtail/vue3-el'

const menuOptions: MenuOptionsType = [
  {
    type: MenuTypeConst.MENU_ITEM,
    index: RouteNameConst.ScriptConfManager,
    title: PageTitleConst.ScriptConfManager,
    iconProps: {
      icon: {
        body: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 32 32"><path fill="currentColor" fill-rule="evenodd" d="m25 21l7 5l-7 5z"/><path fill="currentColor" d="m20.17 19l-2.59 2.59L19 23l4-4l-4-4l-1.42 1.41zm-8.34 0l2.59-2.59L13 15l-4 4l4 4l1.42-1.41z"/><circle cx="9" cy="8" r="1" fill="currentColor"/><circle cx="6" cy="8" r="1" fill="currentColor"/><path fill="currentColor" d="M21 26H4V12h24v7h2V6c0-1.102-.897-2-2-2H4c-1.103 0-2 .898-2 2v20c0 1.103.897 2 2 2h17zM4 6h24v4H4z"/></svg>',
        width: 24,
        height: 24
      }
    }
  },
  {
    type: MenuTypeConst.MENU_ITEM,
    index: RouteNameConst.HostConnConfManager,
    title: PageTitleConst.HostConnConfManager,
    iconProps: {
      icon: {
        body: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v2a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3zm9 13H6a3 3 0 0 1-3-3v-2a3 3 0 0 1 3-3h10.5m-.5 6a2 2 0 1 0 4 0a2 2 0 1 0-4 0m2-3.5V16m0 4v1.5m3.032-5.25l-1.299.75m-3.463 2l-1.3.75m0-3.5l1.3.75m3.463 2l1.3.75M7 8v.01M7 16v.01"/></svg>',
        width: 24,
        height: 24
      }
    }
  },
  {
    type: MenuTypeConst.MENU_ITEM,
    index: RouteNameConst.CmdConfManager,
    title: PageTitleConst.CmdConfManager,
    iconProps: {
      icon: {
        body: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="none"><path d="M0 0h24v24H0z"/><path fill="currentColor" d="M14.486 3.143a1 1 0 0 1 .692 1.233l-4.43 15.788a1 1 0 0 1-1.926-.54l4.43-15.788a1 1 0 0 1 1.234-.693M7.207 7.05a1 1 0 0 1 0 1.414L3.672 12l3.535 3.535a1 1 0 1 1-1.414 1.415L1.55 12.707a1 1 0 0 1 0-1.414L5.793 7.05a1 1 0 0 1 1.414 0m9.586 1.414a1 1 0 1 1 1.414-1.414l4.243 4.243a1 1 0 0 1 0 1.414l-4.243 4.243a1 1 0 0 1-1.414-1.415L20.328 12z"/></g></svg>',
        width: 24,
        height: 24
      }
    }
  },
  {
    type: MenuTypeConst.MENU_ITEM,
    index: RouteNameConst.Terminal,
    title: PageTitleConst.Terminal,
    iconProps: {
      icon: {
        body: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 16 16"><g fill="currentColor"><path d="m10.875 7l2.008 5h-.711l-2.008-5zm-5.125.594q-.414 0-.75.125a1.54 1.54 0 0 0-.578.375q-.243.25-.375.61a2.4 2.4 0 0 0-.133.827q0 .43.117.781t.352.594q.234.243.57.383q.337.14.766.133a2.6 2.6 0 0 0 .992-.195l.125.484a2 2 0 0 1-.492.148a4.4 4.4 0 0 1-.75.07a2.6 2.6 0 0 1-.914-.156a2.2 2.2 0 0 1-.742-.453a1.9 1.9 0 0 1-.485-.742a3.2 3.2 0 0 1-.18-1.023q0-.547.18-1t.5-.782q.32-.328.774-.507a2.7 2.7 0 0 1 1-.18q.445 0 .718.07q.274.07.399.14l-.149.493a2 2 0 0 0-.406-.14a2.4 2.4 0 0 0-.539-.055M8 8h1v1H8zm0 2h1v1H8z"/><path d="M15.5 1H.5l-.5.5v13l.5.5h15l.5-.5v-13zM15 14H1V5h14zm0-10H1V2h14z"/></g></svg>',
        width: 24,
        height: 24
      }
    }
  }
]

const router = useRouter()
const route = useRoute()
const menuActive = ref(route.name)
const menuSelectHandler = (index: string) => {
  menuActive.value = index
  router.push({ name: index })
}
</script>

<template>
  <div class="index-page w-full h-full">
    <x-menu-layout
      :menu-options="menuOptions"
      :side-menu-props="{
        defaultActive: menuActive as string,
        selectHandler: menuSelectHandler
      }"
      :side-props="{
        collapse: true,
        watchSizeProps: { disabled: true },
        className: 'select-none'
      }"
    >
      <template #side-menu-pre="{ collapse }">
        <div class="box-border p-2">
          <s-logo :collapse="collapse" />
        </div>
      </template>
      <template #content>
        <router-view />
      </template>
    </x-menu-layout>
  </div>
</template>

<style scoped></style>
